@charset "utf-8";

/*reset css  重置默认的一些样式 浏览器自带的  目的是保持各种终端显示一致*/
/*所有的标签和伪类  before after*/
*,
::after,
::before {
    padding: 0;
    margin: 0;

    /*在移动端特殊的设置 */
    /*点击高亮效果*/
    -webkit-tap-highlight-color: transparent;
   @media only screen and (max-width: 1080px), only screen and (max-device-width:1080px) {
     html,body {
         font-size:33.75px;
     }
   }
     @media only screen and (max-width: 960px), only screen and (max-device-width:960px) {
     html,body {
         font-size:30px;
     }
   }
     @media only screen and (max-width: 800px), only screen and (max-device-width:800px) {
     html,body {
         font-size:25px;
     }
   }
     @media only screen and (max-width: 720px), only screen and (max-device-width:720px) {
     html,body {
         font-size:22.5px;
     }
   }
     @media only screen and (max-width: 640px), only screen and (max-device-width:640px) {
     html,body {
         font-size:20px;
     }
   }
     @media only screen and (max-width: 600px), only screen and (max-device-width:600px) {
     html,body {
         font-size:18.75px;
     }
   }
     @media only screen and (max-width: 540px), only screen and (max-device-width:540px) {
     html,body {
         font-size:16.875px;
     }
   }
     @media only screen and (max-width: 480px), only screen and (max-device-width:480px) {
     html,body {
         font-size:15px;
     }
   }
     @media only screen and (max-width: 414px), only screen and (max-device-width:414px) {
     html,body {
         font-size:12.9375px;
     }
   }
     @media only screen and (max-width: 400px), only screen and (max-device-width:400px) {
     html,body {
         font-size:12.5px;
     }
   }
     @media only screen and (max-width: 375px), only screen and (max-device-width:375px) {
     html,body {
         font-size:11.71875px;
     }
   }
     @media only screen and (max-width: 360px), only screen and (max-device-width:360px) {
     html,body {
         font-size:11.25px;
     }
   }
     @media only screen and (max-width: 320px), only screen and (max-device-width:320px) {
     html,body {
         font-size:10px;
     }
   }
     @media only screen and (max-width: 240px), only screen and (max-device-width:240px) {
     html,body {
         font-size:7.5px;
     }
   }
  @charset "utf-8";

/*reset css  重置默认的一些样式 浏览器自带的  目的是保持各种终端显示一致*/
/*所有的标签和伪类  before after*/
*,
::after,
::before {
    padding: 0;
    margin: 0;

    /*在移动端特殊的设置 */
    /*点击高亮效果*/
    -webkit-tap-highlight-color: transparent;

    /*设置所有的盒子的宽度以边框开始计算*/
    -webkit-box-sizing: border-box;
    /*要兼容webket浏览器内核厂商  这种情况一般是老的移动端浏览器*/
    box-sizing: border-box;
}
body {
    font-size: 0.7rem;
    color: #000;
    font-family: "Helvetica Neue", Helvetica, STHeiTi, sans-serif !important;
    /*是设备默认的字体*/
    background: #f7f7f7;
}
ol,
ul {
    list-style: none;
}
a {
    text-decoration: none;
    color: #333;
}
a:hover {
    color: #333;
    text-decoration: none;
}
input,
textarea {
    border: none;
    outline: none;
    resize: none;
    /*特殊的属性定义  清楚浏览器给input自带的样式*/
    -webkit-appearance: none;
    /*组建默认的样式为空*/
}
/*common css  也就是我们共用的css*/
.f_left {
    float: left;
}
.f_right {
    float: right;
}
.clearfix::after,
.clearfix::before {
    content: ".";
    line-height: 0;
    height: 0;
    display: block;
    visibility: hidden;
    clear: both;
}
.clearfix {
    *zoom: 1;
}

.show {
    display: block;
}
.hide {
    display: none;
}
.top_5 {
    top: 0.25rem;
}
/*头部开始*/

div.head {
    height: 2.5rem;
    width: 100%;
    background: #ff841d;
    border-bottom: 1px solid #e6e6e6;
    a:nth-of-type(1) {
        width: 12rem;
        height: 1.25rem;
        margin: 0.65rem 0 0 0.6rem;
    }
    a:nth-of-type(1) img {
        width: 9.25rem;
    }
    a:nth-of-type(2) {
        width: 2.4rem;
        height: 2.4rem;
        margin-top: 0.5rem;
        img {
            width: 1.7rem;
        }
    }
}

.search {
    width: 100%;
    height: 2.5rem;
    border-bottom: 1px solid #e6e6e6;
    form {
        display: block;
        width: 90%;
        height: 1.5rem;
        margin-top: 0.5rem;
        position: relative;
        padding-left: 0.5rem;
        border: none;
        input:nth-of-type(1) {
            display: block;
            width: 100%;
            height: 1.5rem;
            border-radius: 15px;
            background: #f1f1f1;
            padding-left: 5%;
        }
        input:nth-of-type(2) {
            position: absolute;
            right: 0;
            top: 0;
            width: 3.15rem;
            height: 1.5rem;
            border-radius: 15px;
            background: #ff841d;
        }
    }
}

/*头部结束*/

/*底部开始*/

footer {
    width: 100%;
    background: #efefef;
    .foot {
        width: 100%;
        border: 1px solid #ccc;
        border-top: none;
        font-size: 0.6rem;
        padding: 0.5rem 0;
        text-align: center;
        .app {
            color: red;
        }
        .phone {
            color: #333;
        }
        span {
            color: #333;
        }
        p {
            color: #333;
            text-align: center;
        }
    }
    > p {
        margin-top: 0.5rem;
        .logn {
            width: 30%;
            border-right: none;
        }
        > a {
            float: left;
            display: inline-block;
            border: 1px solid #ccc;
            height: 1.8rem;
            line-height: 1.8rem;
            text-align: center;
        }
        .signin {
            width: 30%;
            border-right: none;
        }
        .toTop {
            width: 40%;
            img {
                width: 0.75rem;
                margin-right: 0.15rem;
            }
        }
    }

}

/*底部结束*/

/*促销开始*/

.cuxiao,
.pinpai {
    display: block;
    width: 100%;
    height: 1.8rem;
    background: #ff841d;
    span {
        color: #fff;
        line-height: 1.75rem;
        height: 1.75rem;
        font-size: 0.9rem;
        font-weight: bold;
        padding-left: 0.5rem;
    }
    img {
        width: 1rem;
        float: right;
        margin: 0.4rem 0.5rem 0 0;
    }
}

/*促销结束*/

/*三级菜单开始*/
.main {
    position: relative;
    margin-bottom: 2.5rem;
    > .nav {
        width: 100%;
        height: 2rem;
        line-height: 2rem;
        padding: 0 0.5rem;
        background: #ccc;
        a {
            display: inline-block;
        }
        button {
            height: 1.5rem;
            width: 2rem;
            margin-top: 0.25rem;
            line-height: 1.5rem;
            border-radius: 5px;
        }
    }
    .page {
        width: 100%;
        margin: 1rem 0;
        height: 1.7rem;
        text-align: center;
        position: absolute;
        bottom: -2.5rem;
        button {
            float: left;
            width: 33%;
            height: 1.7rem;
            border-radius: 5px;
        }
        ul {
            float: left;
            width: 33%;
            padding: 0 0.5rem;
            border: 1px solid #ccc;
            background: #fff;
            li {
                text-align: center;
                width: 100%;
                height: 1.7rem;
                line-height: 1.7rem;
                z-index: 10;
            }
        }

    }
}

.pro_list {
    width: 100%;
    li {
        margin: 0;
        padding: 0.5rem 0.4rem;
        width: 100%;
        a.media_list {
            display: block;
            width: 100%;
            height: 100%;
        }
    }
}
.media-left > img {
    display: block;
    width: 6rem;
    height: 6rem;
}
.media-body {

    .p1 {
        color: #333333;
        word-break: break-all;
        font-size: 0.75rem;
        line-height: 1.4rem;
        height: 2.8rem;
        overflow: hidden;
        -webkit-line-clamp: 2;
        display: -webkit-box;
        -webkit-box-orient: vertical;
    }
    .p2 {
        color: #ed0000;
        font-size: 0.9rem;
        overflow: hidden;
        margin-top: 0.3rem;
    }
    .p3 {
        color: #a1a1a1;
        line-height: 1.05rem;
    }
}
/*三级菜单结束*/

/*页面加载动画开始*/

.spinner {
    margin: 5rem auto;
    width: 2.5rem;
    height: 3rem;
    text-align: center;
    font-size: 0.5rem;
    position: fixed;
    right: 0;
    left: 0;
    > div {
        background-color: #67CF22;
        height: 100%;
        width: 0.3rem;
        display: inline-block;
        -webkit-animation: stretchdelay 1.2s infinite ease-in-out;
        animation: stretchdelay 1.2s infinite ease-in-out;
    }
    .rect2 {
        -webkit-animation-delay: -1.1s;
        animation-delay: -1.1s;
    }
    .rect3 {
        -webkit-animation-delay: -1.0s;
        animation-delay: -1.0s;
    }
    .rect4 {
        -webkit-animation-delay: -0.9s;
        animation-delay: -0.9s;
    }
    .rect5 {
        -webkit-animation-delay: -0.8s;
        animation-delay: -0.8s;
    }
}

@-webkit-keyframes stretchdelay {
    0%,
    100%,
    40% {
        -webkit-transform: scaleY(0.4);
    }
    20% {
        -webkit-transform: scaleY(1.0);
    }
}

@keyframes stretchdelay {
    0%,
    100%,
    40% {
        transform: scaleY(0.4);
        -webkit-transform: scaleY(0.4);
    }
    20% {
        transform: scaleY(1.0);
        -webkit-transform: scaleY(1.0);
    }
}

/*页面加载动画结束*/

    /*设置所有的盒子的宽度以边框开始计算*/
    -webkit-box-sizing: border-box;
    /*要兼容webket浏览器内核厂商  这种情况一般是老的移动端浏览器*/
    box-sizing: border-box;
}
body {
    font-size: 14px;
    color: #000;
    font-family: "Helvetica Neue", Helvetica, STHeiTi, sans-serif !important;
    /*是设备默认的字体*/
    background: #f7f7f7;
}
ol,
ul {
    list-style: none;
}
a {
    text-decoration: none;
    color: #333;
}
a:hover {
    color: #333;
    text-decoration: none;
}
input,
textarea {
    border: none;
    outline: none;
    resize: none;
    /*特殊的属性定义  清楚浏览器给input自带的样式*/
    -webkit-appearance: none;
    /*组建默认的样式为空*/
}
/*common css  也就是我们共用的css*/
.f_left {
    float: left;
}
.f_right {
    float: right;
}
.clearfix::after,
.clearfix::before {
    content: ".";
    line-height: 0;
    height: 0;
    display: block;
    visibility: hidden;
    clear: both;
}
.clearfix {
    *zoom: 1;
}

.show {
    display: block;
}
.hide {
    display: none;
}
.top_5 {
    top: 5px;
}
/*头部开始*/

div.head {
    height: 50px;
    width: 100%;
    background: #ff841d;
    border-bottom: 1px solid #e6e6e6;
    a:nth-of-type(1) {
        width: 240px;
        height: 25px;
        margin: 13px 0 0 12px;
    }
    a:nth-of-type(1) img {
        width: 185px;
    }
    a:nth-of-type(2) {
        width: 48px;
        height: 48px;
        margin-top: 10px;
        img {
            width: 34px;
        }
    }
}

.search {
    width: 100%;
    height: 50px;
    border-bottom: 1px solid #e6e6e6;
    form {
        display: block;
        width: 90%;
        height: 30px;
        margin-top: 10px;
        position: relative;
        padding-left: 10px;
        border: none;
        input:nth-of-type(1) {
            display: block;
            width: 100%;
            height: 30px;
            border-radius: 15px;
            background: #f1f1f1;
            padding-left: 5%;
        }
        input:nth-of-type(2) {
            position: absolute;
            right: 0;
            top: 0;
            width: 63px;
            height: 30px;
            border-radius: 15px;
            background: #ff841d;
        }
    }
}

/*头部结束*/

/*底部开始*/

footer {
    width: 100%;
    background: #efefef;
    .foot {
        width: 100%;
        border: 1px solid #ccc;
        border-top: none;
        font-size: 12px;
        padding: 10px 0;
        text-align: center;
        .app {
            color: red;
        }
        .phone {
            color: #333;
        }
        span {
            color: #333;
        }
        p {
            color: #333;
            text-align: center;
        }
    }
    > p {
        margin-top: 10px;
        .logn {
            width: 30%;
            border-right: none;
        }
        > a {
            float: left;
            display: inline-block;
            border: 1px solid #ccc;
            height: 36px;
            line-height: 36px;
            text-align: center;
        }
        .signin {
            width: 30%;
            border-right: none;
        }
        .toTop {
            width: 40%;
            img {
                width: 15px;
                margin-right: 3px;
            }
        }
    }

}

/*底部结束*/

/*促销开始*/

.cuxiao,
.pinpai {
    display: block;
    width: 100%;
    height: 36px;
    background: #ff841d;
    span {
        color: #fff;
        line-height: 35px;
        height: 35px;
        font-size: 18px;
        font-weight: bold;
        padding-left: 10px;
    }
    img {
        width: 20px;
        float: right;
        margin: 8px 10px 0 0;
    }
}

/*促销结束*/

/*三级菜单开始*/
.main {
    position: relative;
    margin-bottom: 50px;
    > .nav {
        width: 100%;
        height: 40px;
        line-height: 40px;
        padding: 0 10px;
        background: #ccc;
        a {
            display: inline-block;
        }
        button {
            height: 30px;
            width: 40px;
            margin-top: 5px;
            line-height: 30px;
            border-radius: 5px;
        }
    }
    .page {
        width: 100%;
        margin: 20px 0;
        height: 34px;
        text-align: center;
        position: absolute;
        bottom: -50px;
        button {
            float: left;
            width: 33%;
            height: 34px;
            border-radius: 5px;
        }
        ul {
            float: left;
            width: 33%;
            padding: 0 10px;
            border: 1px solid #ccc;
            background: #fff;
            li {
                text-align: center;
                width: 100%;
                height: 34px;
                line-height: 34px;
                z-index: 10;
            }
        }

    }
}

.pro_list {
    width: 100%;
    li {
        margin: 0;
        padding: 10px 8px;
        width: 100%;
        a.media_list {
            display: block;
            width: 100%;
            height: 100%;
        }
    }
}
.media-left > img {
    display: block;
    width: 120px;
    height: 120px;
}
.media-body {

    .p1 {
        color: #333333;
        word-break: break-all;
        font-size: 15px;
        line-height: 28px;
        height: 56px;
        overflow: hidden;
        -webkit-line-clamp: 2;
        display: -webkit-box;
        -webkit-box-orient: vertical;
    }
    .p2 {
        color: #ed0000;
        font-size: 18px;
        overflow: hidden;
        margin-top: 6px;
    }
    .p3 {
        color: #a1a1a1;
        line-height: 21px;
    }
}
/*三级菜单结束*/

/*页面加载动画开始*/

.spinner {
    margin: 100px auto;
    width: 50px;
    height: 60px;
    text-align: center;
    font-size: 10px;
    position: fixed;
    right: 0;
    left: 0;
    > div {
        background-color: #67CF22;
        height: 100%;
        width: 6px;
        display: inline-block;
        -webkit-animation: stretchdelay 1.2s infinite ease-in-out;
        animation: stretchdelay 1.2s infinite ease-in-out;
    }
    .rect2 {
        -webkit-animation-delay: -1.1s;
        animation-delay: -1.1s;
    }
    .rect3 {
        -webkit-animation-delay: -1.0s;
        animation-delay: -1.0s;
    }
    .rect4 {
        -webkit-animation-delay: -0.9s;
        animation-delay: -0.9s;
    }
    .rect5 {
        -webkit-animation-delay: -0.8s;
        animation-delay: -0.8s;
    }
}

@-webkit-keyframes stretchdelay {
    0%,
    100%,
    40% {
        -webkit-transform: scaleY(0.4);
    }
    20% {
        -webkit-transform: scaleY(1.0);
    }
}

@keyframes stretchdelay {
    0%,
    100%,
    40% {
        transform: scaleY(0.4);
        -webkit-transform: scaleY(0.4);
    }
    20% {
        transform: scaleY(1.0);
        -webkit-transform: scaleY(1.0);
    }
}

/*页面加载动画结束*/
